{% extends "base.html" %}
{% block title %}LISN Miscellaneous:::::{% endblock %}
{% block extra_head %}
<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/daterangepicker-bs3.css" />
<script type="text/javascript" src="{{ STATIC_URL }}js/moment.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/daterangepicker.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/lisn.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#daterange').daterangepicker({ format: 'YYYY/MM/DD' });
  
  $('.check_all_networks').on('click', function () {
      $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
  });
  
  $('.check_all_countries').on('click', function () {
      $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
  });
  
  $('.check_all_stations').on('click', function () {
      $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
  });
  
  $('.label-tooltip').tooltip();
  
});
</script>
{% endblock %}
{% block homeactive %}{% endblock %}
{% block statactive %}{% endblock %}
{% block instactive %}{% endblock %}
{% block dataactive %}{% endblock %}
{% block miscactive %}active{% endblock %}
{% block contactive %}{% endblock %}

{% block content %}

      <div class="page-header">
        <h1><small>Plot Data Availability</small></h1>
      </div>
      <form name="form_availability" id="form_availability" method="post" action="{% url 'apps.misc.views.availability' %}">
      {% csrf_token %}
      <div class="input-group">
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
          <input type="text" style="width: 200px" name="daterange" id="daterange" class="form-control" value="{{dt1}} - {{dt2}}"> 
      </div>
      <br>
                <div class="input-group">
                  <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                  <select style="width: 200px" name="select_datatype" id="select_datatype" class="form-control" onchange="updatePage();">
                    <option value="0">-Choose Data Type-</option>
			        {% for item in data_types %}
			            {% if item in instruments %}
			        <option value="-1" disabled="true">--{{ item|title }}--</option>
			            {% else %}
			                {% if data_type %}
					            {% if data_type.id == item.id %}
			        <option value="{{ item.alias }}" selected>{{ item.name }}</option>
					            {% else %}
			        <option value="{{ item.alias }}">{{ item.name }}</option>
					            {% endif %}
				            {% else %}
			        <option value="{{ item.alias }}">{{ item.name }}</option>
				            {% endif %}				            
			            {% endif %}				        
			        {% endfor %}
                  </select> 
      </div>
      <br>
      <div class="panel-group" id="accordion"> 
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                  Networks
                </a>
                <a id="networks" name="networks" href="#networks"></a>
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse {{network.collapse}}">
              <div class="panel-body">
                  <fieldset>
                  <div class="checkbox"><label><input id="all_networks" class="check_all_networks" type="checkbox" onclick="updateNetworks();" {{ network.check }}>All</label></div>
                  {% for item in networks %}
                  <div class="col-sm-3">
				  <div class="checkbox"><label><input name="ch_network" type="checkbox" value="{{item.network}}" onclick="updateNetwork(this);" {{ item.check }}>{{ item.network }}</label></div>
				  </div>
			      {% endfor %}
			      </fieldset>
              </div>
            </div>
          </div>
          
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                  Countries
                </a>
                <a id="countries" name="countries" href="#countries"></a>
              </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse {{country.collapse}}">
              <div class="panel-body">
                <fieldset>
                <div class="checkbox"><label><input id="all_countries" class="check_all_countries" type="checkbox" onclick="updateCountries();" {{ country.check }}>All</label></div>
                {% for item in countries %}
                <div class="col-sm-3">
				<div class="checkbox"><label><input name="ch_country" type="checkbox" value="{{item.country}}" onclick="updateCountry(this);"{{ item.check }}>{{ item.country }}</label></div>
				</div>
			    {% endfor %}
			    </fieldset>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                  Stations
                </a>
                <a id="stations" name="stations" href="#stations"></a>
              </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse {{station.collapse}}">
              <div class="panel-body">
                <fieldset>
                <div class="checkbox"><label><input id="all_stations" class="check_all_stations" type="checkbox" onclick="updateStations();" {{ station.check }}>All</label></div>
                {% for item in stations %}
                <div class="col-sm-3">
				<div class="checkbox"><label class="label-tooltip" title="{{item.instrument__code}}"><input name="ch_station" type="checkbox" value="{{item.instrument__code}}" onclick="updateStation(this);return false;" {{ item.check }}>{{ item.name }}</label></div>
				</div>
			    {% endfor %}
			    </fieldset>
              </div>
            </div>
          </div>
      </div><!--/.div-accordion -->
      </form>
      <div class="btn-group col-md-2">
        <button type="button" class="btn btn-sm btn-primary btn-block" onclick="showPlot();">Plot</button>
      </div>
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title" id="myModalLabel">Plot Availability</h4>
            </div>
            <div class="modal-body" style="text-align: center">
            <img width="600px" src="{{ url_plot }}">
            </div>
          </div>
        </div>          
      </div><!--/.div-modal -->


{% endblock %}
